2018.9.11 星期二 10:43
前端布局方案主要有三种：传统布局方案（借助浮动、定位等手段）,flex布局,grid布局
主要比较传统布局中自适应，响应式，流式
自适应和响应式历史
# 响应式和自适应的区别
2017-03-01
$_缘起
#### $1
起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多
#### $2
后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。
在这种布局下，出现了两派：
百分比宽度布局:宽度使用百分比，文字使用 em，现在也很多开始使用rem了，也就是所谓的高清方案
流式布局:iGoogle 为代表（已经停止）
#### $3
一开始没有响应式布局这个词语，但是慢慢出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现。
同理，渐进增强出现后，另一个词「优雅降级」也随之出现了。
qqmail 就是 css hack 的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面，为的是统一的用户体验。
而 gmail 使用了渐进增强，你的浏览器越强，你看到的效果就越好，用户体验就越好。
#### $4
再后来，就是大家都熟知的 Google 发布了 android，于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。
最终的解决方案胜出者是响应式布局。
响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。
$_响应式
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页
很多网站的解决方法，是为不同的设备提供不同的网页，
响应式的概念应该覆盖了自适应，而且涵盖的内容更多。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
$_实现方式
1、允许网页宽度自动调整<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。1
2
3 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2、尽量少使用绝对宽度
3、相对大小的字体
4、流动布局（fluid grid）
“流动布局“的含义是，各个区块的位置都是浮动的，不是固定不变的。
$_PS: 理解是错误的，不是浮动，而是百分比
5、选择加载CSS
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。
6、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
7、图片/视频的自适应（fluid image）
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
# 布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）
参考：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
一、静态布局（static layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。
但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。
二、流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
1、 布局特点
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
2、 设计方法
使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，
但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调
三、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
$_PS
这里的自适应 是一种全新的概念 和上文 缘起 提到不一样。
上文缘起提到的自适应，应该是本文的 流式布局和弹性布局；但是上文也没有对流式做进一步解释
于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。
在这种布局下，出现了两派：百分比宽度布局,流式布局
百分比宽度布局:宽度使用百分比，文字使用 em，现在也很多开始使用rem了，也就是所谓的高清方案
$_PS: 现在的弹性布局不应该是flex吗。而不是下文的百分比？
没有人做规范，都是圈内 自产。而且复制严重。
ruan 自适应网页设计（Responsive Web Design）博文介绍的 应该是响应式。
$_PS: 该死的应该和可能
随着技术手段的变化，可能最初的一些概念发生了变化/进化。比如自适应，流式，响应式；弹性
现代的自适应应该是本文提到的概念，根据不同设备/分辨率 适应一份不同css样式(一个设备对应一份样式，多设备可能就是一套(多份)样式；而响应式始终是一份)，方法包括百分比，媒体查询，设备选择等；
而不是 前文提到的简单的宽度百分比。概念没有变，定义更加明确了，前文提到的百分比可能是受到当时技术水平限制而使用的 一种单一的手段/方式。现代概念把流式的百分比当作一种手段包含进来了。
而响应式的中心思想是不变，一套css可以适用多种设备/分辨率，主要手段是媒体查询，其他包括百分比等。发展过程中可能会有把自适应和响应式混谈的时候，比如ruan
流式布局的概念：元素的宽度按照屏幕进行适配调整，也就是宽度百分比。Fluid的不应该理解成float，float是width百分比布局的附属物：宽度定义后，块级元素需要浮动才可以按行内快显示，而不是单独占据一行。
所以流式布局和自适应是两个不同的概念。
栅格系统：以规则的网格阵列来指导和规范版面排布以及信息分布。包含：container，rows，columns，gutters。有960gs 、不固定宽（bootstrap）等，有4、6、8、10、12，24，16列等，没有强调列的宽度是百分比，只需等分就可以了。自适应网页布局中container宽度100%，列的宽度当然百分比合适了；列与列挨靠，对于div可以选择：Floats, inline-blocks, display-table, display-flex. 他们都可以实现栅格布局中，列的定位。我个人推荐使用“float”
Bootstrap的栅格系统定义：提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
bootstrap列结合媒体查询定义为col-sm/md/lg-*, 所以可以说是响应式。其中“流式栅格系统”中流式应该是宽度百分比了。
### 前端的应用(Css Grid)
早期HTML5规范没有定稿之前，大部分应用基于自己设计的百分比or固定宽式的方式来约定了一套class，开发者调用不同的class来完成栅格化布局。960GS/ bootstrap的栅格系统/等等都是这类思路来实现。
在16年，HTML5规范已经被各大浏览器实现，基本上flexbox已经落地到业务中，也出现了很多模块来提供栅格布局http://bulma.io/。
四、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、 布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、 设计方法
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
响应式页面在头部会加上这一段代码：1
2<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
## 五、弹性布局（rem/em布局）
$_PS: 这不是我理解的弹性布局，应该是flex布局
前端布局方案主要有三种：传统布局方案（借助浮动、定位等手段）,flex布局,grid布局
flex布局
grid布局
自适应布局和响应式布局区别
# 页面布局 固定布局 流式布局 响应式布局 自适应布局
## 1 布局方式
1.1 静态/固定布局
站点使用固定的宽度（通常是像素宽度），改变浏览器的宽度或者用不同的设备上查看站点的展示效果一样，这会在小屏设备上引入横向滚动条，对移动设备体验不友好。
1.2 流式布局
站点使用百分比宽度（或者其他相对宽度，某些内容也可以固定宽度），页面相对于不同的浏览器或者不同设备的宽度，流式适应。
1.3 自适应布局
针对特定的设备尺寸进行断点划分，或者针对特定的设备有不同的设计，需要针对新设备进行设计。
1.4 响应式布局
在流式布局的基础上，针对不同宽度的设备进行不同的设计，不需要针对新设备进行设计。
## 2 自适应布局和响应式布局区别
| —- | 自适应 | 响应式 |
|---|---|---|
| 设备识别 | 使用服务端或者客户端代码来检测设备 | 使用媒体查询来检测设备 |
| 实现方式 | 提供单独的HTML或页面，使用CSS根据屏幕大小来改变内容展现 | 使用弹性图片和流式网格来适配图片 |
| 内容优化 | 内容预先选择，只有针对设备的需要的内容才会被下载 | 不管什么设备都会下载所有内容，不管是否需要 |
| 设备优化 | 使用不同的模板，针对不同的设备进行优化 | 对所有设备使用同一个模板 |
| 特性 | 使用脚本来支撑不同的设备和屏幕尺寸，检测不同的设备类型来改变站点的展现行为 | 包含所有的移动端和桌面浏览器支持的特性 |
| 性能 | 只加载用户设备需要的资源，加载较快；图片针对特定的设备分辨率优化，减少文件尺寸和加载时间 | 加载针对所有设备的资源，加载较慢；加载全尺寸的图片通过压缩来适配用户设备 |
| 开发 | 对已经存在的站点来使用可适应的模板 | 整个站点重建 |
| 部署 | 门槛较高，开发者需要扎实的JavaScript;设计和实现曲线陡峭，用户体验需要根据不同的设备定制;不需要站点重建；需要扎实的JavaScript和CSS知识；不同的设备性能表现良好 | 对新站点更容易实现；需要站点重建；不同设备上性能表现较差 |
名词解释
# 静态、自适应、流式、响应式四种网页布局有什么区别
(2016-12-21 11:29:52)
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，
不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，
而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，
流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，
静态的就是采用固定宽度的了。
静态布局（Static Layout）
即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
恩恩大概就是这样。
其他：
HTML网页布局：静态、自适应、流式、响应式
效果展示：HTML 主流布局区别差异动态
14:32
